<!--  -->
<template>
  <ContainerLayout class="holiday-list">
    <div class="form-container">
      <el-form ref="formRef" :inline="true" :model="queryForm" class="query-form" label-width="40px">
        <el-form-item label="用户">
          <el-input v-model="queryForm.user" clearable placeholder="请输入" style="width: 150px" />
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader :options="deptList" :props="deptProps" style="width: 290px" v-model="queryForm.deptIds" collapse-tags clearable />
        </el-form-item>
        <TimeSlotDatePicker label="时段" v-model="queryForm.date" />
        <el-form-item>
          <el-button type="primary" @click="handleClickBtnSubmit" :icon="Search">查询</el-button>
          <el-button @click="handleClickBtnReset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="button-toolbar">
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button v-for="item in holidayCategoryList" plain size="small" type="primary" :icon="Plus" @click="handleAddHoliday(item)">{{ item.dictLabel }}</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-container" ref="tableContainer">
      <el-scrollbar :height="scrollbarHeight">
        <div v-for="tableData in tableDatas" class="table-cells">
          <div class="table-wrap" ref="tableWrap">
            <el-table :data="tableData.result" @selection-change="handleSelectionChange" scrollbar-always-on style="width: 100%" border :height="tableData.height" header-cell-class-name="table-header-row" empty-text="没有数据">
              <el-table-column type="selection" :selectable="selectable" width="55" fixed />
              <el-table-column prop="deptId" label="部门" width="100" fixed />
              <el-table-column prop="nickName" label="用户" width="150" fixed />
              <el-table-column v-for="item in holidayCategoryList" width="180">
                <template #header>
                  <span>{{ item.dictLabel }}</span>
                </template>
              </el-table-column>
              <el-table-column></el-table-column>
              <el-table-column flex="right" width="100">
                <template #default="scope">
                  <el-button link type="info" @click="handleReset(scope.row)" :icon="Refresh">重置</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </ContainerLayout>
  <DialogAddHoliday ref="dialogAddHoliday" />
</template>
<!--  -->
<script setup lang="ts">
import { ref, onMounted, nextTick, reactive } from 'vue'
import ContainerLayout from '../layout/ContainerLayout.vue'
import { Plus } from '@element-plus/icons-vue'
import { useHolidayCategoryStore, useDeptStore } from '../stores'
import http from '../http'
import * as utils from '../utils'
import DialogAddHoliday from '../components/dialog/DialogAddHoliday.vue'
import { Refresh, Search } from '@element-plus/icons-vue'
import TimeSlotDatePicker from '../layout/FormTableLayout/TimeSlotDatePicker.vue'
import { ElMessage } from 'element-plus'

const scrollbarHeight = ref(400)
const tableDatas = ref<any[]>([])
const userList = ref<any[]>([])
const holidayList = ref<any[]>([])
const tableContainer = ref(ref<HTMLElement | null>(null))
const holidayCategoryList = useHolidayCategoryStore().getAllState()
const multipleSelection = ref<any[]>([])
const dialogAddHoliday = ref<any>()
const deptList = ref(useDeptStore().getAllState())
const deptProps = ref({ multiple: true, label: 'deptName', value: 'deptId' })

const selectable = (row: any) => row.status !== 1

const queryForm = reactive({
  user: '',
  date: [] as Date[],
  deptIds: [] as any[] | number[],
})

onMounted(async () => {
  await getDataList()
})
const getDataList = async () => {
  await getUserList()
  await getHolidayList()
  tableDatas.value = [
    {
      title: '用户列表',
      result: userList.value,
      height: 'auto',
    },
  ]
  console.log('用户列表', userList.value)
  nextTick(() => {
    if (tableContainer.value) {
      scrollbarHeight.value = tableContainer.value.offsetHeight
    }
  })
}

const handleClickBtnSubmit = async () => {
  await getDataList()
}
const handleClickBtnReset = async () => {
  await resetForm()
}
const resetForm = () => {
  const [start, end] = utils.getDateRangeByDate(utils.shortcutsType.本月) as Date[]
  tableDatas.value = []
  queryForm.user = ''
  queryForm.date = [start, end]
  queryForm.deptIds = [] as string[] | number[]
  handleClickBtnSubmit()
}
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}
const handleReset = (row: any) => {
  console.log('重置', row)
}

const getUserList = async () => {
  const res = await http({
    method: 'GET',
    path: '/dev-api/system/user/list',
    params: {},
  })
  if (res.code === 200) {
    userList.value = res.rows
  }
}

const getHolidayList = async () => {
  const res = await http({
    method: 'GET',
    path: '/dev-api/oa/holiday/list',
    params: {},
  })
  if (res.code === 200) {
    holidayList.value = res.data
  }
}

const handleAddHoliday = (item: any) => {
  if (multipleSelection.value.length === 0) {
    return ElMessage.warning('请选择要操作的记录')
  } else {
    dialogAddHoliday.value.openDialog(multipleSelection.value, item.dictValue)
  }
}
</script>
<!--  -->
<style scoped lang="scss">
.holiday-list {
  display: flex;
  flex-direction: column;
  .form-container {
    display: flex;
    justify-content: flex-start;
  }
  .button-toolbar {
    margin-bottom: 18px;
  }
  .table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
    }
    .table-cells {
      display: flex;
      flex-direction: column;
      & + .table-cells {
        margin-top: 20px;
      }
    }
  }
}
</style>
